<template>
  <view class="container">
    <uv-sticky bgColor="#fff">
      <uv-tabs :list="tabsList" :current="tabsCurrent" :lineWidth="58" :inactiveStyle="{color: '#666'}"
        :activeStyle="{color: '#333'}" :scrollable="false" @click="tabsHandler"></uv-tabs>
    </uv-sticky>
    <view class="main">
      <view class="main_box" v-for="(item,index) in list" :key="index">
        <view class="main_box_left flex-center">
          <view>
            <text>￥</text>
            <view>{{item.price}}</view>
          </view>
          <text>满{{item.ow_price}}元使用</text>
        </view>
        <view class="main_box_right">
          <view class="main_box_right_head">
            <view>{{item.title}}</view>
            <text>{{item.tips}}</text>
          </view>
          <view class="main_box_right_footer">
            <view class="">
              {{item.restrict}}
            </view>
            <button class="main_box_right_btn">立即使用</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const tabsList = ref([
    {
      name: '未使用(0)',
    }, {
      name: '已使用(0)',
    }, {
      name: '已过期(0)'
    },
  ])
  const tabsCurrent = ref(0)
  const tabsHandler = (item : any) => {
    console.log(item)
    tabsCurrent.value = item.index
  }
  const list = ref([])
  const data = [
    {
      title: '满300减100',
      restrict: '自领取3天内使用',
      tips: '全部课程可用',
      ow_price: 300,
      price: 200,
    }, {
      title: '满300减100',
      restrict: '自领取3天内使用',
      tips: '全部课程可用',
      ow_price: 300,
      price: 200,
    }, {
      restrict: '自领取3天内使用', title: '满300减100',
      tips: '全部课程可用',
      ow_price: 300,
      price: 200,
    }, {
      restrict: '自领取3天内使用', title: '满300减100',
      tips: '全部课程可用',
      ow_price: 300,
      price: 200,
    }, {
      restrict: '自领取3天内使用', title: '满300减100',
      tips: '全部课程可用',
      ow_price: 300,
      price: 200,
    }, {
      restrict: '自领取3天内使用', title: '满300减100',
      tips: '全部课程可用',
      ow_price: 300,
      price: 200,
    },
  ]
  const getList = () => {
    list.value.push(...data)
    tabsList.value[tabsCurrent.value].name = `${tabsList.value[tabsCurrent.value].name.slice(0, 3)}(${list.value.length})`
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 20
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  onLoad(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  .container {
    box-sizing: border-box;
    background-color: #f4f4f4;

    :deep(.uv-tabs__wrapper__nav__line) {
      background: #228CFE !important;
      font-size: 28rpx !important;
    }

    .main {
      padding: 30rpx;
      box-sizing: border-box;

      &_box {
        width: 689rpx;
        height: 180rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(0, 0, 0, 0.08);
        border-radius: 20rpx;
        background-image: url('/static/my/youhuiquanbg.png');
        background-size: 100%;
        margin-bottom: 30rpx;
        display: flex;

        &_left {
          width: 209rpx;
          height: 180rpx;
          border-radius: 20rpx 0rpx 0rpx 20rpx;
          flex-direction: column;

          >view {
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;
            display: flex;
            margin-bottom: 10rpx;
            align-items: flex-end;

            view {
              font-size: 56rpx;
              margin-bottom: -8rpx;
            }
          }

          >text {
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }

        &_right {
          flex: 1;
          padding: 25rpx 20rpx 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          &_head {
            font-weight: 500;

            font-size: 24rpx;
            color: #999999;

            view {
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 5rpx;
            }
          }
          &_footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: #999999;
          }
          &_btn {
            width: 133rpx;
            height: 47rpx;
            background: linear-gradient(138deg, #FF973A 0%, #FF6A3C 100%);
            border-radius: 24rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
</style>